<template>
  <view class="content">
    <view class="container">
      <!-- 输入框 -->
      <textarea placeholder="想说什么就说什么叭- -" @blur="inputBlur" :focus="inputFocus" :auto-height="true"
                :show-confirm-bar="false" maxlength="1500" v-model="content" class="post-txt"></textarea>

      <!-- 上传图片or视频 -->
      <view class="img-list">
        <u-upload :fileList="fileList" @delete="deletePic" @afterRead="afterRead" multiple :maxCount="9"
                  :previewFullImage="true" name="images"></u-upload>
      </view>

      <!-- 选择位置 -->
      <view @click="chooseLocation" class="choose-location">
        <u-icon name="map" size="30rpx"></u-icon>
        <text class="txt">{{ address || '你在哪里?' }}</text>
      </view>
    </view>

    <!-- 底部确定按钮 -->
    <view @click="clickCreate" class="yue-base-button">
      <view>确定发布~</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 默认输入框获得焦点
      inputFocus: true,
      zyCommunityInteraction: {
        interactionId: '', // 目标评论id
        communityId: '',
        createBy: '',
        updateBy: '',
        createTime: '',
        updateTime: '',
        content: '', // 评论内容
        images: '',
        delFlag: '',
        remark: '',
        userId: '', // 当前登录用户id
      },
      address: '',  // 地址
      content: '', // 评论内容
      fileList: []// 上传的视频
    }
  },

  methods: {
    // 删除图片
    deletePic(event) {
      console.log("woshi ")
      this.fileList.splice(event.index, 1);
    },
    // 文字内容
    inputBlur(event) {
      this.inputCursor = event.detail.cursor;
      this.inputFocus = false;
    },
    // 位置选择
    chooseLocation() {
      let that = this;
      uni.chooseLocation({
        success: function (res) {
          that.address = res.name;
        }
      });
    },
    // 发布
    clickCreate() {
      if (!this.content) {
        uni.showToast({
          title: "请输入内容噢",
          icon: "error"
        })
        return;
      }
      /*将form 的数据添加到 zyCommunityInteraction中*/
      this.zyCommunityInteraction.content = this.content
      this.zyCommunityInteraction.userId = uni.getStorageSync('ownerId')
      this.zyCommunityInteraction.createBy = uni.getStorageSync('ownerId')
      for (let i = 0; i < this.fileList.length; i++) {
        this.zyCommunityInteraction.images += this.fileList[i].url;
        if (this.fileList.length !== i + 1) {
          this.zyCommunityInteraction.images += ",";
        }
      }

      /*添加方法*/
      this.$http.put('/uni-app/zyCommunityInteraction/', this.zyCommunityInteraction)
      //   返回上一个页面
      uni.reLaunch({  // 使用uni.navigateTo进行页面跳转
        url: '/pages/community/CommunityDetailedView', // 跳转的页面路径
      })
    },

    // 新增图片
    async afterRead(event) {
      // // 清空原上传的图片
      // this.fileList.forEach((item) => {
      // // 移除页面中显示的图片
      // this.fileList.splice(item.index, 1);
      // });
      // this.fileList = [];
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file)
      let fileListLen = this.fileList.length
      lists.map((item) => {
        this.fileList.push({
          ...item,
          status: 'uploading',
          message: '上传中'
        })
      })
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        console.log("上传返回：", result)
        let item = this.fileList[fileListLen]
        this.fileList.splice(fileListLen, 1, Object.assign(item, {
          status: 'success',
          message: '',
          url: result
        }));
        fileListLen++;
        console.log("fileListLen：", fileListLen);
      }
      console.log("图片容器：", this.fileList);
    },
    uploadFilePromise(url) {
//插件方法
      return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
          url: 'http://localhost:8080/uni-app/zyComplaintSuggest/sugUploadImages', // 仅为示例，非真实的接口地址
          filePath: url,
          name: 'file',
          success: (res) => {
            // setTimeout(() => {
            // resolve(res.data.data)
            // }, 1000)
            // 在 success 回调中应该先检查是否上传成功，再进行后续处理
            console.log(res)
            if (res.statusCode == 200) {
              const result = JSON.parse(res.data);
              resolve(result.data); // 假设后端返回的数据结构中有一个 data 字段表示上传后的 URL
            } else {
              reject(new Error("OSS上传失败"));
            }
          }
        });
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  background-color: #FFFFFF;
  border-radius: 30upx 30upx 0upx 0upx;
}

.container {
  padding: 20rpx 40rpx;
  overflow: hidden;
}

.post-txt {
  width: 100%;
  min-height: 300rpx;
  line-height: 1rpx;
}

/* 选择位置 */
.choose-location {
  display: inline-flex;
  align-items: center;
  background-color: #eee;
  font-size: 28rpx;
  border-radius: 100rpx;
  padding: 10rpx 20rpx;
  margin-left: 5rpx;
  line-height: 1;
  color: #616161;

  .txt {
    margin-left: 10rpx;
  }
}

.yue-base-button {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 0;
  width: 100%;
  padding: 40rpx 0;
  z-index: 3;
}

.yue-base-button view {
  width: 560rpx;
  text-align: center;
  height: 96rpx;
  line-height: 96rpx;
  border-radius: 96rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: #FFFFFF;
  background: #07C062;
}

// 相机icon
.icon-camera {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 210rpx;
  height: 210rpx;
  border-radius: 6rpx;
  margin: 5rpx 0rpx 0rpx 5rpx;
  background-color: #f4f5f7;
}

// 媒体列表
.img-list {
  display: flex;
  flex-wrap: wrap;
  //margin-bottom: 20rpx;
}

.img-list-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.img-item {
  width: 210rpx;
  height: 210rpx;
  margin: 5rpx;
  border-radius: 6rpx
}
</style>
